<template>
  <div class="card__container">
    <div class="card__content">
      <el-card shadow="hover" class="card__content">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-form-item label="随访时间" prop="visitTime">
            <el-date-picker
              v-model="form.visitTime"
              type="datetime"
              :picker-options="pickerOptions"
              :editable="false"
              clearable
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="随访医生" prop="visitDoctor">
            <el-select
              v-model="form.visitDoctor"
              placeholder="请选择随访医生"
              style="width: 220px"
            >
              <el-option
                v-for="options in doctorList"
                :key="options.userId"
                :label="options.userName"
                :value="options.userName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-col>
            <el-form-item label="创建人员" prop="createBy">
              <div style="width: 220px">
                <el-input v-model="userName" readonly />
              </div>
            </el-form-item>
          </el-col>
          <el-form-item label="随访内容" prop="contet">
            <el-input
              v-model="form.contet"
              class="card__input"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="随访结果" prop="result">
            <el-input
              v-model="form.result"
              class="card__input"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-button
            type="primary"
            :loading="formLoading"
            @click="handleSubmit(returnVisitStatusEnum['待计划'])"
          >
            保存待计划
          </el-button>
          <el-button
            type="primary"
            :loading="formLoading"
            @click="handleSubmit(returnVisitStatusEnum['已完成'])"
          >
            完成回访
          </el-button>
          <el-button @click="handleVisible">取消</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapState } from 'vuex'
import { addDoctor } from '@/api/services/doctor'
import { listStaff } from '@/api/services/common'
import store from '@/store'
import {
  returnVisitStatusOptions,
  trackingStatusOptions,
  consumeStatusOptions,
} from '@/utils/options'
import { returnVisitStatusEnum, trackingStatusEnum } from '@/utils/enums'

const FORM_DATA = {
  visitTime: undefined,
  trackStatus: undefined,
  consumeStatus: undefined,
  visitPerson: undefined,
  visitStatus: undefined,
  contet: undefined,
  result: undefined,
}

export default {
  name: 'ReturnVisit',
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
    doctorList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      formLoading: false,
      form: {},
      // 表单校验
      rules: {
        visitDoctor: [
          { required: true, message: '随访人员不能为空', trigger: 'blur' },
        ],
        trackStatus: [
          { required: true, message: '跟踪状态不能为空', trigger: 'blur' },
        ],
        consumeStatus: [
          { required: true, message: '消费状态不能为空', trigger: 'blur' },
        ],
        contet: [
          { required: true, message: '回访内容不能为空', trigger: 'blur' },
        ],
        visitTime: [
          { required: true, message: '回访时间不能为空', trigger: 'blur' },
        ],
      },
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
      clinicId: (state) => state.clinic.clinicId,
      clinicName: (state) => state.clinic.clinicName,
    }),
    trackingStatusOptions() {
      return trackingStatusOptions
    },
    returnVisitStatusOptions() {
      return returnVisitStatusOptions
    },
    consumeStatusOptions() {
      return consumeStatusOptions
    },
    returnVisitStatusEnum() {
      return returnVisitStatusEnum
    },
    trackingStatusEnum() {
      return trackingStatusEnum
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.form = { ...FORM_DATA }
    },
    /**
     * 获取tc列表
     */
    handleVisible() {
      this.form = {}
    },
    handleSubmit(visitStatus) {
      this.$refs.form.validate(async (valid) => {
        try {
          if (!valid) {
            return
          }
          this.formLoading = true
          const { id: clinicPersonId, name, phoneNumber } = this.patient
          const formData = {
            ...this.form,
            visitStatus,
            visitTime: dayjs(this.form.visitTime).format('YYYY-MM-DD HH:mm:ss'),
            clinicPersonId,
            createBy: this.userName,
          }
          if (visitStatus === returnVisitStatusEnum['已完成']) {
            formData.visitFinishTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
          }
          await addDoctor(formData)
          this.msgSuccess('添加成功')
          this.$emit('change')
          this.handleVisible()
        } finally {
          this.formLoading = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.card__container {
  width: 100%;
  display: flex;

  &:first-child {
    margin-bottom: 20px;
  }

  .card__content {
    flex: 1;

    &:first-child {
      margin-right: 20px;
    }

    .card__header,
    .card__p {
      margin: 0;
    }

    .card__p,
    .card__input {
      margin-bottom: 15px;
    }

    .card__p {
      font-size: 14px;
    }
  }
}
</style>
